// 最近会话视图。所有的会话均在这里发生。
// 若用户从未发生过会话，在双击时会打开此视图进行会话

import QtQuick 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.1
import com.yihu.xchat.model 1.0
import com.yihu.xchat.enum 1.0

import "subview" as Subviews
import "../widgets" as Widgets

import "../../js/view/SessionsView.js" as Js

Rectangle {
    anchors.fill: parent

    // 默认颜色与背景
    color: "#EEEEEE"
    Image {
        anchors.fill: parent

        source: "qrc:/images/session_view_background.jpg"
    }

    // 会话列表
    Rectangle {
        id: sessionsRect

        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.left: parent.left

        border.color: "lightgray"
        border.width: 1

        width: 200

        // 搜索
        Widgets.Search {
            id: search
            placeholderText: "搜索最近联系人..."
        }

        // 最近会话列表
        ListView{
            id: sessionListView

            anchors.top: search.bottom
            anchors.bottom: parent.bottom
            anchors.topMargin: 10

            width: parent.width

            // 高亮显示
            highlight: Rectangle {
                color: "lightgray"
                focus: true
            }

            // 模型
            model: SessionsSingleton

            // 委托
            delegate: sessionsDelegate
        }

        // 会话列表委托
        Component {
            id: sessionsDelegate

            Rectangle {
                width: parent.width
                height: 50

                color: "transparent"
                visible: showInList

                property string sessionId: id

                // 置顶时显示
                Rectangle {
                    anchors.top: parent.top
                    anchors.left: parent.left

                    width: parent.width / 30
                    height: parent.height / 2

                    visible: pinToTop
                    color: "red"
                }

                // 照片
                Widgets.RoundImage {
                    id: contactPhoto

                    x: 4
                    anchors.verticalCenter: parent.verticalCenter

                    source: photo
                    width: 46
                    height: 46
                }

                // 名称
                Text {
                    anchors.top: parent.top
                    anchors.right: parent.right
                    anchors.topMargin: 6
                    anchors.rightMargin: 6

                    x: contactPhoto.x + contactPhoto.width + 5

                    width: 145

                    elide: Text.ElideRight

                    text: name.split("@")[0]
                }

                // 最后消息
                Text {
                    anchors.right: parent.right
                    anchors.rightMargin: 6

                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 4

                    x: contactPhoto.x + contactPhoto.width + 5

                    width: 145
                    elide: Text.ElideRight
                    color: "gray"

                    text: {
                        if(X.Image == lastMessageContentType) {
                            return "[图片]";
                        } else if(X.Audio == lastMessageContentType) {
                            return "[语音]";
                        } else if(X.Video == lastMessageContentType) {
                            return "[视频]";
                        }

                        return lastMessageContent;
                    }
                }

                // 点击时切换会话
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        if(sessionListView.currentIndex != index) {
                            Js.switchSession(sessionId, index);
                        }
                    }
                }
            }
        }
    }

    // P2会话视图
    Subviews.P2PSessionView {
        id: p2pSessionView

        visible: false

        anchors.top: parent.top
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.left: sessionsRect.right
    }

    // Group会话视图
    Subviews.GroupSessionView {
        id: groupSessionView

        visible: false

        anchors.top: parent.top
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.left: sessionsRect.right
    }

    Component.onCompleted: {
        // 加载完成后，初始JS中的模型与视图
        Js.init(sessionListView, p2pSessionView, groupSessionView);
        SessionsSingleton.sessionAdded.connect(Js.onSessionAdded);
    }
}
